<template>
	<view @click="fouceTextarea" class="editable-textarea">
	   <draggable  :list="listCopy" >
	     <view
	       class="editable-content"
	       v-for="(user, index) in listCopy"
	       :key="index"
	   	  :options="{handle: '.handle', animation: 1200}">
	       <template v-if="isEditable(user)">
	         <textarea 
	   			ref="textarea" 
	   			:value="getContent(user)" 
	   			@input="updateContent(user,$event.target.value)"
	   			:maxlength="maxlength"
	   			auto-height
				:focus="isFocus"
				@blur="isBlur">
	   		</textarea>
	   	  </template>
	       <template v-else>
	         <view style="background-color: #9c9ea5;color:white;font-size: 30rpx;display: inline;">
	   			{{ getContent(user) }}
	   			<view class="nickname" style="display: inline;font-size:20rpx;background-color: #9c9ea5;color:white;">({{ user.nickName }})
	   			</view>
	   		</view>
	       </template>
	     </view>
	   </draggable>
   </view>
</template>
<script>
import draggable from 'vuedraggable';
export default {
  components: {
	draggable,
  },
  name: "dragTextarea",
  props: {
    /* 编辑器的内容 @touchend="onTouchEnd($event,index)"*/
    list: {
      type: Array,
      default: () => [],
    },
    type: {
      type: String,
      default: "lc",
    },
  },
  watch:{
	list(val){
		this.listCopy = val;
	},
	listCopy(newVal) {
	    this.list = newVal;
    },   
  },
  data(){
  	return {
		listCopy:[],
		isFocus:false,
		maxlength:-1
  	}
  },
  mounted(){
	  this.listCopy = this.list;
	  // this.adjustTextareaHeight(); // 在组件挂载后立即调整textarea标签的高度
  },
  methods: {
	isBlur(){
		this.isFocus = false;
	},
	fouceTextarea(){
		this.$nextTick(() => {
			this.isFocus = true;
		})
	},
    getContent(item){
      let content;
      switch(this.type){
        case "lc":
          content = item.lc;
          break;
        case "fz":
          content = item.fz;
          break;
        case "lj":
          content = item.lj;
          break;
        case "qg":
          content = item.qg;
          break;
        case "ss":
          content = item.ss;
          break;
        case "jj":
          content = item.jj;
          break;
        case "na":
          content = item.na;
          break;
        case "ha":
          content = item.ha;
          break;
        case "ax":
          content = item.ax;
          break;
        case "yc":
          content = item.yc;
          break;
        case "dh":
          content = item.dh;
          break;
        case "kf":
          content = item.kf;
          break;
        case "ts":
          content = item.ts;
          break;
      }
      return content;
    },
    isEditable(user) {
      return user.userId.toString() === this.$store.getters.userId;
    },
    updateContent(user, dom) {
      let content = dom;
      switch(this.type){
        case "lc":
          user.lc = content;
          break;
        case "fz":
          user.fz = content;
          break;
        case "lj":
          user.lj = content;
          break;
        case "qg":
          user.qg = content;
          break;
        case "ss":
          user.ss = content;
          break;
        case "jj":
          user.jj = content;
          break;
        case "na":
          user.na = content;
          break;
        case "ha":
          user.ha = content;
          break;
        case "ax":
          user.ax = content;
          break;
        case "yc":
          user.yc = content;
          break;
        case "dh":
          user.dh = content;
          break;
        case "kf":
          user.kf = content;
          break;
        case "ts":
          user.ts = content;
          break;
      }
    },
  },
};
</script>

<style>
 textarea {
   resize: none;
   width:100%;
   /* min-height: 110rpx; */
 }
 .editable-textarea {
   border: 1px solid #dcdfe6;
   border-radius: 4px;
   padding: 10px;
   line-height: 1.5;
   min-height: 180px;
   max-height: 50em; /* 设置默认行宽为4行 */
   outline: none;
   white-space: pre-line;
   word-wrap: break-word;
   /*word-break:keep-all;|*/
   resize: both;
    height: auto;
 }

 .editable-textarea:focus {
   border-color: #409EFF;
 }
</style>
